// 定义取消动画
@keyframes cancel-bounce {
	0% { transform: translate3d(100%, 0, 0); }
	100% { transform: translate3d(0, 0, 0); }
}
// 取消动画进入
.cancel-bounce-enter-active {
	animation: cancel-bounce .3s;
}
// 取消动画离开
.cancel-bounce-leave-active {
	animation: cancel-bounce .3s reverse;
}

.header {
	height: 11.5vw;
	line-height: 11.5vw;
	background: #F79709;
	display: flex;
	// position: relative;
	// z-index: 10;
	.city {
		flex-basis: 18%;
		font-size: 14px;
		text-align: center;
	}
	.search-box {
		flex: 1;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		position: relative;
		.search-icon {
			color: #222;
			font-size: 12px;
			position: absolute;
			left: 10px;
		}
		.box {
			flex: 1;
			box-sizing: border-box;
			line-height: 18px;
			background: #fff;
			color: #333;
			font-size: 14px;
			letter-spacing: 1px;
			outline: 0;
			padding: 6px 20px 6px 32px;
			margin-right: 5px;
			border-radius: 5px;
		}
		.clear {
			position: absolute;
			right: 8px;
			color: #999;
		}
	}
	.cancel {
		// position: absolute;
		// top: 0;
		// right: 12px;
		margin-right: 5px;
		font-size: 14px;
	}
}

.content {
	position: fixed;
	left: 0;
	right: 0;
	top: 11.5vw;
	bottom: 13.5vw;
	.content-scroll {
		height: 100%;
		overflow: hidden;
	}
}